<template>
    <div id="home">
        <Vheader/>
        <div class="home-grids">
            <ul class="home-nav-bar" >
                <li class="grids-item" v-for="(item,i) in scrollView" :key="i"><a :href="item.href"><img :src="item.imgsrc" alt="" /><span class="grids-items-text">{{ item.text }}</span></a></li>
            </ul>
        </div>
        <VBanner/>
        <Vlists/>
        <Vtabbar/>
    </div>
</template>
<script>
import Vheader from './../template/header.vue'
import Vtabbar from './../template/tabbar.vue'
import VBanner from './../template/HomeBanner'
import Vlists from './../template/lists'
//tabbar
export default {
    name:'',    
    components: {
       Vheader,
       VBanner,
       Vlists,
       Vtabbar
    },
    data(){
        return {
            scrollView:[
                {href:'#1',imgsrc:require('./../assets/grids-icon-01.png'),text:'Bracelets'},
                {href:'#2',imgsrc:require('./../assets/grids-icon-02.png'),text:'Rings'},
                {href:'#3',imgsrc:require('./../assets/grids-icon-03.png'),text:'Personalized'},
                {href:'#4',imgsrc:require('./../assets/grids-icon-04.png'),text:'Accessories'},
                {href:'#5',imgsrc:require('./../assets/grids-icon-05.png'),text:'More'}
            ]
        }
    }
}
</script>
<style>
body{padding-bottom:50px;}
.home-grids{width: 100%;}
.home-nav-bar{padding-left: 0;margin: 0;display:flex;width: 100%;overflow: hidden;flex-wrap: wrap;margin-bottom: 15px;}
.home-nav-bar li {width: 25%; text-align: center;margin-top: 10px;}
.home-nav-bar li img {width: 70%;}
.home-nav-bar li a{font-size: 12px;text-decoration: none;color: #000;}
.box-header .mint-tabbar{position: fixed;z-index: 999;}
span.grids-items-text {display: inline-block;transform: scale(0.9);display: block;}
</style>
